<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系统修饰符</title>
    <script src="../../utils/vue.js"></script>
</head>
<body>
        <!-- 用系统修饰符实现仅在按下相应的按键才触发鼠标/键盘事件的监听器：.ctrl（17）,.shift（16）,.alt（18）,.meta(Home键，36) -->
        <!-- 系统修饰符可结合按键修饰符使用 -->
        <!-- 当系统按键没用时，需转为相应的keycode码：比如ctrl的码为17 -->
        <div id="app">
            <p>
                按下shift显示弹出框：
                <input @keyup.16="msg">
            </p>
            <p>
                按下home键和c显示弹出框：
                <input @keyup.36.67="msg">
            </p>
            <p>
                同时按下alt和c显示弹出框：
                <input v-on:keyup.alt.67="msg">
            </p>
            <p>
                按住ctrl并点击鼠标显示弹出框：
                <input @click.ctrl="msg">
            </p>
            <p>
                <!-- exact修饰符的用法： 只允许按下设置的修饰键才触发，不能同时按住其他无关的键 -->
                当仅按住ctrl时触发弹出框：
                <!-- 下列表示有且仅按住ctrl时触发 -->
                <input @keydown.ctrl.exact="msg">
            </p>
            <p>
                当不按住任何按键时触发点击事件：
                <input @click.exact="msg">
            </p>
            <p>
                <!-- 鼠标按键修饰符：响应与鼠标相关操作时触发：.left,.right,.middle -->
                点击鼠标左键弹出框：
                <input @click.left="msg">
            </p>
            <p>
                点击鼠标右键，并阻止默认右键菜单：
                <input @click.right="msg" oncontextmenu="return false">
            </p>
            <p>
                点击鼠标右键，并阻止默认右键菜单：
                <input @contextmenu.prevent="msg">  
            </p>
        </div>
        <script>
            var app = new Vue({
                el: "#app",
                data: {

                },
                methods: {
                    msg: function (event) {
                        alert("最后按键：" + event.key);
                    }
                }
            });
        </script>
</body>
</html>